<template>
  <div>
    <van-nav-bar
      :title="$route.meta.title"
      left-text="返回"
      right-text="按钮"
      left-arrow
      @click-left="$router.push('/layout/home')"
    />
    <van-search
      @click="$router.push('/search')"
      v-model="value"
      placeholder="请输入搜索关键词"
      @clear="onClear"
    />
    <van-divider />
    {{ list }}
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { debounce } from 'lodash'
export default {
  data() {
    return {
      value: '',
      list: [],
    }
  },
  computed: {
    ...mapState(['bookList']),
  },
  watch: {
    value(v) {
      if (v) {
        this.getSearchList()
      } else {
        this.list = []
      }
    },
  },
  methods: {
    getSearchList: debounce(function () {
      if (this.value) {
        this.list = this.bookList.filter((v) => {
          if (v.bookName.includes(this.value)) {
            return v
          }
        })
        console.log('this.list:', this.list)
      }
    }, 500),
    onClear() {
      this.list = []
    },
  },
}
</script>

<style></style>
